<template>
  <!-- 查看回执 -->
  <div>
    <el-button
      type="primary"
      plain
      size="mini"
      icon="el-icon-view"
      class="common-addBtn"
      :disabled="disabled"
      @click="handleView"
      >查看回执</el-button
    >
    <el-dialog
      :title="resultTitle"
      :visible.sync="openResult"
      :close-on-click-modal="false"
    >
      <basic-table
        ref="tableList"
        :columns="columns"
        :tableData="tableData"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        :loading="loading"
      >
        <!-- 回执状态 -->
        <template #code="scope">
          <dict-tag :options="dict.type.mft_response_code" :value="scope.row.code"></dict-tag>
        </template>
        <!-- 回执状态 -->
        <template #messageType="scope">
          <dict-tag :options="dict.type.mft_decl_message_type" :value="scope.row.messageType"></dict-tag>
        </template>
        <!-- 对象类型 -->
        <template #objType="scope">
          <dict-tag :options="dict.type.mft_response_obj_type" :value="scope.row.objType"></dict-tag>
        </template>
        <!-- 对象类型 -->
        <template #opType="scope">
          <dict-tag :options="dict.type.mft_decl_op_type" :value="scope.row.opType"></dict-tag>
        </template>
        <template #operate="scope">
          <div class="option-menu">
            <el-button
              type="text"
              size="mini"
              class="table-edit"
              @click="handleClickEdit(scope.index, scope.row)"
              v-hasPermi="['system:costStopConfig:edit']"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="mini"
              class="table-edit"
              @click="handleDelete(scope.index, tableData)"
              v-hasPermi="['system:costStopConfig:delete']"
            >
              删除
            </el-button>
          </div>
        </template>
      </basic-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openResult = false" size="small">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMftResponseMsg } from "@/api/swdecl/mftResponseMsg"
export default {
  name: "viewReponse",
  dicts: ["manifest_declare_status", "mft_response_obj_type", "mft_response_code", "mft_decl_message_type", "mft_decl_op_type"],
  props: {
    disabled: {
      type: Boolean,
      default: true
    },
    checkedId: {
      type: Array
    },
    msgType: {
      type: String
    }
  },
  data() {
    return {
      loading: false,
      openResult: false,
      resultTitle: "查看回执",
      // 列表数据
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      columns: [
        {
          prop: "manifestId",
          label: "批次号",
          align: "center",
          minWidth: 120
        },
        {
          prop: "code",
          label: "回执状态",
          align: "center",
          minWidth: 100,
          slot: true
        },
        {
          prop: "messageType",
          label: "申报报文类型",
          align: "center",
          minWidth: 200,
          slot: true
        },
        {
          prop: "msg",
          label: "回执消息",
          align: "center",
          minWidth: 100
        },
        {
          prop: "objType",
          label: "对象类型",
          align: "center",
          minWidth: 80,
          slot: true
        },
        {
          prop: "opType",
          label: "操作类型",
          align: "center",
          minWidth: 100,
          slot: true
        },
        {
          prop: "createTime",
          label: "回执时间",
          align: "center",
          minWidth: 140,
        },
      ]
    }
  },
  methods: {
    handleView() {
      this.openResult = true;
      this.getList();
    },
    getList() {
      this.loading = true;
      getMftResponseMsg(this.checkedId[0],this.msgType).then(res => {
        if(res.code == 200) {
          this.tableData = res.rows;
          this.total = res.total;
        }
      }).finally(() => {
        this.loading = false;
      })
    },
    // 分页
    handleSizeChange(val) {
      this.queryParams.pageSize = val.pageSize;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val.currentPage;
      this.getList();
    },
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 10px 20px;
}
::v-deep .el-empty {
  padding: 10px 0;
}
::v-deep .el-empty__image {
  width: 80px !important;
}
::v-deep .el-empty__description {
  margin-top: 0;
  p {
    font-size: 12px;
  }
}
</style>
